<!--
 * @Author: wangming
 * @Date: 2021-10-18 17:33:30
 * @LastEditors: wangming
 * @LastEditTime: 2022-04-14 15:12:12
 * @FilePath: /hanma-application-designer-fed/src/pages/designUniversal/__components__/dynamicForm/mainContent/__layouts/hlTreeListSelect/index.vue
 * @Description: 
-->
<template>
  <div class="ks-row modalbox">
    <div class="w200 p10 modalbox-acitve" v-if="istree">
      <el-divider content-position="left">树菜单</el-divider>
      <Stree
        :config="config.treeconfig"
        class="p10 contentbox poi"
        :class="{ acitvebox: config.treeconfig.key === getModelForm.key }"
        @click.native.stop="handlelist(config.treeconfig)"
      ></Stree>
    </div>
    <div class="ks-col p10 ova">
      <el-divider content-position="left">可选项</el-divider>
      <div
        @click.stop="handlelist(config.tableconfig)"
        class="contentbox poi db p5"
        style="height: 300px"
        :class="{ acitvebox: config.tableconfig.key === getModelForm.key }"
      >
        <component
          :acitvekey="getModelForm.key"
          @header-click="({ type, form }) => handleAdd(type, form)"
          :is="config.tableconfig.listType"
          :getEntitymodelList="config.tableconfig.__config.getEntitymodelList"
          :config="config"
        ></component>
      </div>
    </div>
    <div
      class="w200 p10 modalbox-acitve contentbox"
      @click.stop="handlelist(config.activeconfig)"
      :class="{ acitvebox: config.activeconfig.key === getModelForm.key }"
    >
      <el-divider content-position="left"
        >已选项
        <el-tooltip
          placement="top"
          v-if="config.activeconfig.__config.showExplain"
        >
          <div
            slot="content"
            class="explain-content"
            :style="{
              'white-space': 'pre-line',
            }"
          >
            {{ config.activeconfig.__config.explainValue }}
          </div>
          <i class="el-icon-info"></i>
        </el-tooltip>
      </el-divider>
      <div class="ks-col p10 f12">
        <div class="ks-row-middle mb5">
          <div>【已选项】1</div>
          <span
            class="iconfont iconbianji ml10 poi f12"
            v-if="config.activeconfig.__config.customCode"
          ></span>
          <i class="el-icon-close ks-col tr"></i>
        </div>
        <div class="ks-row-middle">
          <div>【已选项】2</div>
          <span
            class="iconfont iconbianji ml10 poi f12"
            v-if="config.activeconfig.__config.customCode"
          ></span>
          <i class="el-icon-close ks-col tr"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from "../mixins.js";
import Slist from "./Slist";
import Stable from "./Stable";
import Stree from "./Stree";
import { getHmentitymodelList } from "@/apis/paas/HmEntityModelController.js";
import { TABLE_RETAIN_CODE } from "@/utils/const";
import { mapActions } from "vuex";
export default {
  computed: {
    istree() {
      return this.config.tagName === "hlTreeListSelect";
    },
  },
  mixins: [mixins],
  components: { Slist, Stable, Stree },
  watch: {
    "config.__config.modelCode": {
      handler: async function (val) {
        if (!!val) {
          let { moduleId, modelCode } = this.config.__config;
          this.config.tableconfig.__config.moduleId = moduleId;
          this.config.tableconfig.__config.modelCode = modelCode;
          this.config.__config.showlabel = "";
          this.gethmTableList(modelCode);
        }
      },
    },
  },
  data() {
    return {};
  },
  async mounted() {
    await this.$nextTick();
    this.setModelForm(this.config);
    try {
      //兼容老数据
      this.config.tableconfig.__config.getEntitymodelList.forEach((i) => {
        if (i.showColumn === undefined) {
          i.showColumn = true;
        }
      });
    } catch (error) {}
  },
  methods: {
    ...mapActions(["setModelForm"]),
    async handleAdd(type, form) {
      this.setModelForm({});
      await this.$nextTick();
      switch (type) {
        case "tb_hd":
          this.setModelForm(
            Object.assign(form, {
              key: this.config.key + "_" + form.code,
              tagName: "selectinlisthd",
            })
          );
          break;
        case "tb_search":
          this.setModelForm(
            Object.assign(form, {
              key: this.config.key + "_selecttbsearch",
              tagName: "selecttbsearch",
            })
          );
          break;

        default:
          break;
      }
    },
    async gethmTableList(modelKey) {
      let hmentitymodelList = await getHmentitymodelList({
        modelKey,
        activated: true,
      });
      this.config.tableconfig.__config.getEntitymodelList = hmentitymodelList
        .filter(
          (i) => i.code !== "deleted" && TABLE_RETAIN_CODE.indexOf(i.type) > -1
        )
        .map((i) =>
          Object.assign(
            {
              showColumn: true,
              name_i18n: i.localism,
            },
            i
          )
        );
    },
    async handlelist(value) {
      this.setModelForm({});
      await this.$nextTick();
      !!value.key ||
        Object.assign(value, { key: this.config.key + "_" + value.tagName });
      this.setModelForm(value);
    },
  },
};
</script>

<style scoped lang="scss">
.modalbox {
  width: 100%;
  height: 600px;
  border: 1px solid #dedede;
  .centerbox {
    width: 100%;
    border-left: 1px solid #dedede;
    border-right: 1px solid #dedede;
    display: flex;
    flex-direction: column;
  }
  &-acitve {
    display: flex;
    flex-direction: column;
  }
  .contentbox {
    border: 1px dotted #dedede;
    &:hover {
      background-color: #fbfcfd;
    }
  }
  .acitvebox {
    border: 1px solid #409eff;
  }
}
.explain-content {
  max-width: 400px;
}
</style>
